﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <title>聊天室</title>
    <script src="../Scripts/jquery-1.9.1.js"></script>
    <script src="../Scripts/jquery.signalR-2.2.0.min.js" type="text/javascript"></script>
    <script src="../signalr/hubs" type="text/javascript"></script>
    <style type="text/css">
        #chatbox {
            width: 100%;
            height: 500px;
            border: 2px solid blue;
            padding: 5px;
            margin: 5px 0px;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .linfo {
        }

        .rinfo {
            text-align: right;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            var clientName = $("#clientname").val();
            var eChatBox = $("#chatbox");
            var eUsers = $("#users");

            var chat = $.connection.chat;
            $.connection.hub.qs = { "clientName": clientName };
            chat.state.test = "test";

            chat.client.receiveMessage = function (dt, cn, msg) {
                var clsName = "linfo";
                if (cn == clientName || cn.indexOf("您对") >= 0) clsName = "rinfo";
                eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>");
                eChatBox.scrollTop(eChatBox[0].scrollHeight);
            }

            chat.client.userChange = function (dt, msg, users) {
                eChatBox.append("<p>" + dt + " " + msg + "</p>");
                eUsers.find("option[value!='']").remove();
                for (var i = 0; i < users.length; i++) {
                    if (users[i].Value == clientName) continue;
                    eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>")
                }
            }

            $.connection.hub.start().done(function () {

                $("#btnSend").click(function () {
                    var toUserId = eUsers.val();
                    if (toUserId != "") {
                        chat.server.sendOne(toUserId, $("#message").val())
                            .done(function () {
                                //alert("发送成功！");
                                $("#message").val("").focus();
                            })
                            .fail(function (e) {
                                alert(e);
                                $("#message").focus();
                            });
                    }
                    else {
                        chat.server.send($("#message").val())
                            .done(function () {
                                //alert("发送成功！");
                                $("#message").val("").focus();
                            })
                            .fail(function (e) {
                                alert(e);
                                $("#message").focus();
                            });
                    }
                });

            });

        });
    </script>
</head>
<body>
    <h3>大众聊天室</h3>
    <div id="chatbox">
    </div>
    <div>
        <span>聊天名称：</span>
        @Html.TextBox("clientname", ViewBag.ClientName as string, new { @readonly = "readonly", style = "width:300px;" })
        <span>聊天对象：</span>
        @Html.DropDownList("users", ViewBag.OnLineUsers as IEnumerable<SelectListItem>)
    </div>
    <div>
        @Html.TextArea("message", new { rows = 5, style = "width:500px;" })
        <input type="button" value="发送消息" id="btnSend" />
    </div>
</body>
</html>